<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-12 14:51:16
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-09-08 14:04:32
-->
<template>
  <div ref="parRef" style="height:100%;">
    <el-row class="chart-lenged-box">
      <el-col :span="4" style="font-size: 0.8rem;">单位/人数</el-col>
      <el-col
        v-for="(item, index) in gradeList"
        :key="index"
        :span="9"
        class="row"
        style="color:#fff;"
        >{{ item.name }}：
        <div
          :class="{
            'first-cz-box': index == 0 && i == 0,
            'second-cz-box': index == 0 && i == 1,
            'thrid-cz-box': index == 0 && i == 2,
            'first-gz-box': index == 1 && i == 0,
            'second-gz-box': index == 1 && i == 1,
            'thrid-gz-box': index == 1 && i == 2
          }"
          v-for="(k, i) in item.list"
          :key="i"
        >
          {{ k.name }}
        </div>
        <!-- <div class="second-cz-box">2021级</div>
        <div class="thrid-cz-box">2022级</div> -->
      </el-col>
      <!-- <el-col :span="9" class="row" style="color:#fff;"
        >高中部：
        <div class="first-gz-box">2020级</div>
        <div class="second-gz-box">2021级</div>
        <div class="thrid-gz-box">2022级</div></el-col
      > -->
    </el-row>
    <div id="chartContainer"></div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2'
export default {
  props: {
    gradeList: {
      type: Array,
      default: () => []
    },
    lengedList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chartLenged: null
    }
  },
  watch: {
    lengedList: {
      handler: function (newValue, oldValue) {
        if (newValue !== oldValue && oldValue.length !== 0) {
          this.chartLenged.changeData(this.lengedList)
        }
      }
    }
  },
  methods: {
    init () {
      this.chartLenged = new Chart({
        container: 'chartContainer',
        autoFit: true,
        height: this.$refs.parRef.offsetHeight - 30
      })
      // 数据格式： [{"gender":"female","height":161.2,"weight":51.6}]
      this.chartLenged.data(this.lengedList)
      this.chartLenged.scale({
        times: {
          range: [0, 1]
        },
        count: {
          nice: true,
          min: 0
        }
      })
      this.chartLenged.legend(false)
      this.chartLenged.tooltip({
        showCrosshairs: true,
        shared: true
      })
      this.chartLenged.axis('count', {
        tickLine: null,
        subTickLine: null,
        grid: {
          line: {
            style: {
              stroke: '#0D3B77',
              lineWidth: 1,
              lineDash: [4, 5],
              strokeOpacity: 0.4,
              shadowColor: '#0D3B77',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cursor: 'pointer'
            }
          }
        },
        label: {
          style: {
            fill: '#7ba0d5'
          },
          formatter: val => {
            return val
          }
        }
      })
      this.chartLenged.axis('times', {
        tickLine: null,
        subTickLine: null,
        grid: {
          line: {
            style: {
              stroke: '#0D3B77',
              lineWidth: 1,
              lineDash: [4, 5],
              strokeOpacity: 0.4,
              shadowColor: '#0D3B77',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              cursor: 'pointer'
            }
          }
        },
        line: {
          style: {
            stroke: '#0D3B77',
            lineWidth: 1,
            lineDash: [4, 5],
            strokeOpacity: 0.4,
            shadowColor: '#0D3B77',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            cursor: 'pointer'
          }
        },
        label: {
          style: {
            fill: '#7ba0d5'
          }
        }
      })

      this.chartLenged
        .line()
        .position('times*count')
        .color('name', [
          '#5AD8A6',
          '#2E96FF',
          '#8E98FF',
          '#801473',
          '#C3940F',
          '#E66303'
        ])
        .shape('smooth')

      this.chartLenged
        .point()
        .position('times*count')
        .color('name')
        .shape('line')
        .style({
          stroke: '#fff',
          lineWidth: 0
        })

      this.chartLenged.render()
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.chartLenged === null) {
          this.init()
        } else {
          this.chartLenged.changeData(this.lengedList)
        }
      }, 500)
    })
  },
  created () {}
}
</script>
<style lang="less" scoped>
.chart-lenged-box {
  color: #7ba0d5;
  font-size: 14px;
  padding-bottom: 5px;
}
.first-cz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2253bd;
    left: 0;
    top: 5px;
  }
}
.second-cz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2e96ff;
    left: 0;
    top: 5px;
  }
}
.thrid-cz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #8691ff;
    left: 0;
    top: 5px;
  }
}
// 高中
.first-gz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #801473;
    left: 0;
    top: 5px;
  }
}
.second-gz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #c3940f;
    left: 0;
    top: 5px;
  }
}
.thrid-gz-box {
  margin-right: 20px;
  padding-left: 15px;
  position: relative;
  &&::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e66303;
    left: 0;
    top: 5px;
  }
}
</style>
